import React, {useContext} from 'react';
import {store} from "../store";
import '../button.css'
import '../select.css'

function ControlPanel() {
    const {state, dispatch} = useContext(store);
    console.log("++");
    console.log(state);
    return <div style={{width:'100%',height:'100%'}}>
        <form name="control" id="control">
            <p style={{marginTop:'10%',marginLeft:30}}>请选择查看年份</p>
            <div  include="form-input-select()" style={{width:'100%',height:'100%'}}>
                <select required style={{marginLeft:30,width:'130px'}} id="year" onClick={()=>{dispatch({type:'changeyear'})}}>
                    <option value='2015' onClick={()=>{dispatch({type:'changeyear'})}}>2015</option>
                    <option value='2016' onClick={()=>{dispatch({type:'changeyear'})}}>2016</option>
                    <option value='2017' onClick={()=>{dispatch({type:'changeyear'})}}>2017</option>
                    <option value='2018' onClick={()=>{dispatch({type:'changeyear'})}}>2018</option>
                    <option value='2019' onClick={()=>{dispatch({type:'changeyear'})}}>2019</option>
                    <option value='2020' onClick={()=>{dispatch({type:'changeyear'})}}>2020</option>
                    <option value='2021' onClick={()=>{dispatch({type:'changeyear'})}}>2021</option>
                </select>
            </div>
        </form>
        <button class="blue" style={{marginTop:30,marginLeft:30,width:'130px'}} onClick={() => dispatch({ type: 'increment' })}>当前显示前{state.count}国家</button>
        <button class="blue" style={{marginTop:50,marginLeft:30,width:'130px'}} onClick={() => dispatch({ type: 'pie' })}>前50分布地区饼图</button>
        <button class="blue" style={{marginTop:50,marginLeft:30,width:'130px'}} onClick={() => dispatch({ type: 'compare' })}>2020-2021对比</button>
        <button class="blue" style={{marginTop:50,marginLeft:30,width:'130px'}} onClick={() => dispatch({ type: 'line' })}>排名变化折线图</button>
    </div>;
}
export default ControlPanel;
